<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>判断浏览器支持的创建Ajax对象的方式</title>
	<style type="text/css">
		body {
			font-family: "微软雅黑";
		}
	</style>
	<script type="text/javascript">
		var xmlHttp;

	</script>
</head>

<body>
	<form action="a.php" method="GET">
		<input type="text" name="username" />
		<button>123</button>
	</form>

	<form>
		<input type="text" name="username" id="inp1">
		<input type="submit" id="sub">
	</form>

	<form action="a.php" method="POST">
		<input type="text" name="username" />
		<button>123</button>
	</form>

	<form>
		<input type="text" name="username" id="inp2">
		<input type="submit" id="sub1">
	</form>

	<p></p>

	<script>
		var sub = document.getElementById("sub")
		var sub1 = document.getElementById("sub1")


		
		sub.addEventListener("click", function (e) {
			e.preventDefault()
			var xmlHttp = new XMLHttpRequest()

			var inp1 = document.getElementById("inp1")

			xmlHttp.open("GET", "a.php", true)
			xmlHttp.send()

			xmlHttp.onreadystatechange = function () {
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					document.getElementsByTagName("p")[0].innerHTML = xmlHttp.responseText
				}
			}
		})






















		sub1.addEventListener("click",function (e) {
			e.preventDefault()
			var xmlHttp = new XMLHttpRequest()

			var inp2 = document.getElementById("inp2")
			var data = "username=" + inp2.value;
			xmlHttp.open("POST", "a.php", true)
			xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlHttp.send("username=" + inp2.value)

			xmlHttp.onreadystatechange = function () {
				if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
					document.getElementsByTagName("p")[0].innerHTML = xmlHttp.responseText
				}
			}

		})
	</script>
</body>

</html>